<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>index</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
		<link rel="shortcut icon" href="images/favicon.png">
		<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
		<link href="jqueryMobile/jquery.mobile.theme-1.3.1.css" rel="stylesheet">
		<link href="jqueryMobile/jquery.mobile.structure-1.3.1.css" rel="stylesheet">
		<link href="jqueryMobile/jquery.mobile-1.3.1.css" rel="stylesheet">
		<link rel="stylesheet" href="css/main.css">
		<script>window.$ = window.jQuery = WLJQ;</script>
		<script src="jqueryMobile/jquery.mobile-1.3.1.js"></script>
		  
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.exp&sensor=false"></script>
		<!--  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>-->
		
		<link rel="stylesheet"  href="css/easyclaim.css"/>

	</head>
	<body style="display: none;">
    <div data-role="page" id="loginPage" style="background: #F2F8FA;">
		<div data-role="content" style="padding: 15px;">
			<div style="text-align:center;vertical-align: middle;margin-top: 50px;"><img src='images/customer.jpg' alt="logo" width="150"/></div>
	        <div style="padding:10px 20px;">
	            <label for="un" class="ui-hidden-accessible">License Plate:</label>
	            <input type="text" name="user" id="licensePlateInp" value="" placeholder="License Plate No." data-theme="a">
	            <label for="pw" class="ui-hidden-accessible">Password:</label>
	            <input type="password" name="pass" id="passwordInp" value="" placeholder="Password" data-theme="a">
	            <!-- <button id="loginBtn" data-theme="b" data-icon="sign-in">Log in</button> -->
	            <button id="loginBtn" data-theme="b" data-icon="sign-in">Log in</button>
	        </div>	
    	</div>
    </div>
	<div data-role="page" id="customerInfoPage">
		<div data-role="header" id="header0" data-position="fixed" style="background: #27446A;">
			<h3>Easy Claim</h3>
			<a href="#loginPage" data-role="button" id="logoutBtn" class="ui-btn-right" data-icon="sign-out">Logout</a>
		</div>
		<div data-role="content" style="padding: 15px">
			<div class="ui-bar ui-bar-b">
	    		<h3>Customer Information</h3>
			</div>
			<div data-role="fieldcontain">
		         <img id="carImageInfo" src='' alt="car's image" width='290px' style='display:block'/>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="licenseplate">License Plate:</label>
		         <input type="text" data-mini="true" name="licenseplate" id="licenseplateInfo" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="name">Name:</label>
		         <input type="text" data-mini="true" name="name" id="nameInfo" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="cardetail">Car Detail:</label>
		         <input type="text" data-mini="true" name="cardetail" id="cardetailInfo" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="mobile">Mobile:</label>
		         <input type="text" data-mini="true" name="mobile" id="mobileInfo" value="" readonly>
    		</div>
		</div>
		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
					<li><a href="#customerInfoPage" data-transition="none" class="ui-btn-active ui-state-persist">Home</a></li>
					<li><a href="#claimRequestPage" data-transition="none">Report</a></li>
					<li><a href="#claimListPage" data-transition="none">Job List</a></li>
					<!--  <li><a href="#claimDetailPage">Detail</a></li> -->
				</ul>
			</div>
		</div>
	</div>
	<div data-role="page" id="claimRequestPage">
		<div data-role="header" id="header1" data-position="fixed" style="background: #27446A;">
			<h3>EasyClaim</h3>
			<a href="#loginPage" data-role="button" id="logoutBtn" class="ui-btn-right" data-icon="sign-out">Logout</a>
		</div>
		<div data-role="content" style="padding: 15px">
			<div class="ui-bar ui-bar-b">
	    		<h3>Report Accident</h3>
			</div>
			<div data-role="fieldcontain">
		         <label for="licenseplate">License Plate:</label>
		         <input type="text" data-mini="true" name="licenseplate" id="licenseplateRequest" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="name">Name:</label>
		         <input type="text" data-mini="true" name="name" id="nameRequest" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="cardetail">Car Detail:</label>
		         <input type="text" data-mini="true" name="cardetail" id="cardetailRequest" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="mobile">Mobile:</label>
		         <input type="text" data-mini="true" name="mobile" id="mobileRequest" value="" readonly>
    		</div>
    		<!-- <div data-role="fieldcontain">
		         <label for="status">Status:</label>
		         <input type="text" data-mini="true" name="status" id="status" value="" readonly>
    		</div>-->
    		<div data-role="fieldcontain">
		    	<label for="image">Image:</label>
		         
               <!--  <a data-role="button" id="takePhotoBtn" data-inline="true" class="flat-btn" data-shadow="false" style="border: none;padding: 0;">
                	<img src='images/camera.png' alt="take photo" width="50"/>
              	</a>  -->
              	
              	<a data-role="button" id="takePhotoBtn" data-inline="true" data-shadow="false" data-theme="none">
              		<img src='images/camera.png' alt="take photo" width="40" border="0"/>
				</a>            	
    		</div>
    		<div class="capturedImage" id="capturedImage" style="text-align: center;">				
				<img id='captareImageRequest' src='images/captureimage.png' width='290px' style='display:block'>
			</div>
			
			<div class="ui-grid-a" style="padding: 15px;">
				<div class="ui-block-a">
					<input id="sendRequest" type="submit" value="Send" data-icon="forward" data-theme="b" data-mini="true" />
				</div>
				<div class="ui-block-b">
					<input id="cancelRequest" type="button" value="Cancel" data-icon="delete" data-mini="true"/>
				</div>
			</div>
		</div>
		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
					<li><a href="#customerInfoPage" data-transition="none">Home</a></li>
					<li><a href="#claimRequestPage" class="ui-btn-active ui-state-persist" data-transition="none">Report</a></li>
					<li><a href="#claimListPage" data-transition="none">Job List</a></li>
					<!--  <li><a href="#claimDetailPage">Detail</a></li> -->
				</ul>
			</div>
		</div>
	</div>
	<div data-role="page" id="claimListPage">
		<div data-role="header" id="header2" data-position="fixed" style="background: #27446A;">
			<h3>Easy Claim</h3>
			<a href="#loginPage" data-role="button" id="logoutBtn" class="ui-btn-right" data-icon="sign-out">Logout</a>
		</div>
		<div data-role="content" style="padding: 15px">
			<div class="ui-bar ui-bar-b">
	    		<h3>Claim List</h3>
			</div>
			
			<ul id="claimInfoListView" data-role='listview' data-inset='true' data-theme='b'
				data-split-theme='e' data-split-icon='arrow-d'>
				<!--  <li>
					<a href='#viewphoto' data-rel='dialog'>
					<img style='margin: 10px' src=''  width="60px"/>
					<h3>Id : </h3>
					<p>Date :</p>
					<p>Status :</p>
					</a>
					<a href='#' data-rel='dialog'></a>
				</li>
				<li>
					<a href='#viewphoto' data-rel='dialog'>
					<img style='margin: 10px' src='' width="60px"/>
					<h3>Id : </h3>
					<p>Date :</p>
					<p>Status :</p>
					</a>
					<a href='#' data-rel='dialog'></a>
				</li>-->
			</ul>
			
			<!--  <div style="text-align: center;">
					<a data-role="button" data-inline="true" id="syncBtn">
                	<img src='images/sync.png' alt="sync photo" width="50"/>
            		</a>
			</div>-->
		</div>
		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
					<li><a href="#customerInfoPage" data-transition="none">Home</a></li>
					<li><a href="#claimRequestPage" data-transition="none">Report</a></li>
					<li><a href="#claimListPage" class="ui-btn-active ui-state-persist" data-transition="none">Job List</a></li>
					<!--  <li><a href="#claimDetailPage">Detail</a></li> -->
				</ul>
			</div>
		</div>
	</div>
	<div data-role="page" id="claimDetailPage">
		<div data-role="header" id="header3" data-position="fixed" style="background: #27446A;">
			<a href="#claimListPage" data-role="button" class="ui-btn-back" data-icon="back" data-transition="slide" data-direction="reverse">Back</a>
			<h3>Easy Claim</h3>
			<!--  <a href="#loginPage" data-role="button" id="logoutBtn" class="ui-btn-right" data-icon="sign-out">Logout</a> -->
		</div>
		<div data-role="content" style="padding: 15px">
			<div class="ui-bar ui-bar-b">
	    		<h3>Claim Detail</h3>
			</div>
			<div data-role="fieldcontain">
		         <label for="claimidDetail">Claim Id:</label>
		         <input type="text" data-mini="true" name="claimidDetail" id="claimidDetail" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="locationDetail">Location:</label>
		         <input type="text" data-mini="true" name="locationDetail" id="locationDetail" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="dateDetail">Date:</label>
		         <input type="text" data-mini="true" name="dateDetail" id="dateDetail" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
    			<label for="surveyornameDetail">Surveyor Name:</label>
		         <input type="text" data-mini="true" name="surveyornameDetail" id="surveyornameDetail" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="surveyormobileDetail">Surveyor Mobile:</label>
		         <a data-role="button" id="surveyorTelephoeBtn" data-inline="true" data-shadow="false" data-theme="none">
           			<img src='images/telephone.jpg' alt="telephone" width="30" border="0"/>
				 </a>
		         <input type="text" data-mini="true" name="surveyormobileDetail" id="surveyormobileDetail" value="" readonly>
    		</div>
    		<div data-role="fieldcontain">
		         <label for="statusDetail">Status:</label>
		         <input type="text" data-mini="true" name="statusDetail" id="statusDetail" value="" readonly>
    		</div>
    		<div class="capturedImage"  id="surveyorImage" style="text-align: center;">				
				<img id='surveyorImageDetail' src='images/captureimage.png' height='190px' width='290px' style='display:block'>
			</div>
			<div style="text-align: center;">
				<!--  <a data-role="button" data-inline="true" id="LocationBtn" class="flat-btn" data-shadow="false" style="border: none;padding: 0;">
               		<img src='images/location.png' alt="location" width="40"/>
           		</a> -->
           		<a data-role="button" id="LocationBtn" data-inline="true" data-shadow="false" data-theme="none">
           			<img src='images/location.png' alt="location" width="40" border="0"/>
				</a>
			</div>
		</div>
		<!--  <div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
					<li><a href="#customerInfoPage" data-transition="none">Home</a></li>
					<li><a href="#claimRequestPage" data-transition="none" >Report</a></li>
					<li><a href="#claimListPage" data-transition="none">Job List</a></li>
				</ul>
			</div>
		</div> -->
	</div>


	<div data-role="page" id="map-page">

		<div data-role="header" id="header3" data-position="fixed"
			style="background: #27446A;">
			<a href="#claimDetailPage" data-role="button" class="ui-btn-back" data-icon="back" data-transition="none">Back</a>
			<h3>Easy Claim</h3>
			<!--  <a href="#loginPage" data-role="button" id="logoutBtn" class="ui-btn-right" data-icon="sign-out">Logout</a> -->
		</div>
		<div data-role="content" class="ui-content" id="map-canvas"></div>
		<!--  <div data-role="footer" data-position="fixed">
					<div data-role="navbar">
						<ul>
							<li><a href="#customerInfoPage">Home</a></li>
							<li><a href="#claimRequestPage">Report</a></li>
							<li><a href="#claimListPage">Job List</a></li>
						</ul>
					</div>
				</div>-->
	</div>


	<script src="js/memoryStore.js"></script>
	<script src="js/initOptions.js"></script>
    <script src="js/main.js"></script>
    <script src="js/messages.js"></script>
    </body>
</html>